<template>
    <!--    用户搜索条件框-->
    <div class="cardContent">
        <a-space>
            <a-input-search
                    v-model:value="searchData.title"
                    style="width: 300px"
                    placeholder="请输入标题搜索..."
                    enter-button
                    allow-clear
                    @search="load"
            />
            <a-button type="primary"
                      @click="switchPage">
                {{searchData.buttonName}}
            </a-button>
        </a-space>
    </div>
    <div class="cardContent">
        <a-button type="primary" @click="openConceptualDraw">提交产品研发方案</a-button>
        <a-table :dataSource="conceptualList"
                 :columns="columns"
                 :pagination="false"
                 style="margin-top: 10px"
                 bordered>
            <template #bodyCell="{text,record,index,column}">
                <template v-if="column.key == 'status'">
                    <a-tag v-if="text == 0" color="processing">
                        <template #icon>
                            <sync-outlined :spin="true"/>
                        </template>
                        研发方案审批中
                    </a-tag>
                    <a-tag v-if="text == 1" color="default">
                        <template #icon>
                            <clock-circle-outlined/>
                        </template>
                        审核通过等待研发部门确认
                    </a-tag>
                    <a-tag v-if="text == 2" color="error">
                        <template #icon>
                            <close-circle-outlined/>
                        </template>
                        被驳回
                    </a-tag>
                    <a-tag v-if="text == 3" color="processing">
                        <template #icon>
                            <sync-outlined :spin="true"/>
                        </template>
                        研发部门研发中
                    </a-tag>
                    <a-tag v-if="text == 4" color="success">
                        <template #icon>
                            <check-circle-outlined/>
                        </template>
                        成功研发
                    </a-tag>
                    <a-tag v-if="text == 5" color="success">
                        <template #icon>
                            <check-circle-outlined/>
                        </template>
                        已发布
                    </a-tag>
                </template>
                <a-space v-if="column.key == 'action'">
                    <a-button type="primary"
                              @click="checkAuditTrail(record.id)">
                        查看审核记录
                    </a-button>
                </a-space>
            </template>
        </a-table>
        <a-config-provider :locale="locale">
            <a-pagination style="margin-top: 10px; text-align: right"
                          v-model:current="pagination.current"
                          v-model:pageSize="pagination.pageSize"
                          show-quick-jumper
                          show-size-changer
                          :total="pagination.total"
                          :show-total="total => `总 ${total} 条数据`"
                          :page-size-options="pageSizeOptions"
                          @change="onChange"/>
        </a-config-provider>
    </div>
    <!--    发起概念产品研发方案申请-->
    <a-drawer
            title="提交研发方案"
            :width="700"
            :visible="conceptualDrawVisible"
            :body-style="{ paddingBottom: '40px' }"
            :footer-style="{ textAlign: 'right' }"
            @close="conceptualDrawVisible = false"
    >
        <a-form :model="conceptual" layout="vertical">
            <a-row>
                <a-form-item label="申请人">
                    <a-input v-model:value="loginUser.username" disabled></a-input>
                </a-form-item>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="标题" v-bind="validateInfos.title">
                        <a-input v-model:value="conceptual.title" placeholder="请输入标题"/>
                    </a-form-item>
                </a-col>
            </a-row>

            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="设计理念" v-bind="validateInfos.designConcept">
                        <a-textarea v-model:value="conceptual.designConcept" :rows="5"/>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
        <template #footer>
            <a-space>
                <a-button type="default" @click="conceptualDrawVisible = false">取消</a-button>
                <a-button type="primary" @click="conceptualApply">申请</a-button>
            </a-space>
        </template>
    </a-drawer>
    <!--    查看概念产品研发详情-->
    <a-drawer
            title="研发方案详情"
            :width="1000"
            :visible="conceptualVisible"
            :body-style="{ paddingBottom: '40px' }"
            :footer-style="{ textAlign: 'right' }"
            @close="conceptualVisible = false"
    >
        <a-form :model="drawerData.billInfo" layout="vertical">
            <a-row>
                <a-form-item label="申请人">
                    <a-input v-model:value="loginUser.username" disabled></a-input>
                </a-form-item>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="标题" name="title">
                        <a-input v-model:value="drawerData.billInfo.title" :disabled="true"/>
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item label="研发资金">
                        <a-input v-model:value="drawerData.billInfo.rdFunding" :disabled="true"/>
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item label="状态" name="status">
                        <a-tag color="processing">
                            <template #icon>
                                <sync-outlined :spin="true"/>
                            </template>
                            审批中
                        </a-tag>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="设计理念" name="remark">
                        <a-textarea v-model:value="drawerData.billInfo.designConcept"
                                    :disabled="true" :rows="3"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="研发成品图">
                        <upload v-model:imgUrl="drawerData.billInfo.pic"
                                :upload-disabled="true"
                                :upload-url="'http://localhost:8088/upload'"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="单件制作成本">
                        <a-input-number addon-after="￥"
                                        disabled
                                        :min="1"
                                        v-model:value="drawerData.billInfo.productionCosts"/>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
        <a-list
                item-layout="horizontal"
                size="large"
                style="margin-top: 10px"
                bordered
                :data-source="drawerData.comments"
        >
            <template #header>
                <div>批注列表</div>
            </template>
            <template #renderItem="{ item, index }">
                <a-list-item>
                    <a-list-item-meta>
                        <template #title>
                            {{ item.username }}({{item.roleName}})
                        </template>
                        <template #avatar>
                            <a-avatar :src="item.pic"/>
                        </template>
                        <template #description>{{item.fullMessage}}</template>
                    </a-list-item-meta>
                    <div>
                        {{formatDate(item.time)}}
                    </div>
                </a-list-item>
            </template>
        </a-list>
    </a-drawer>
</template>

<script>
    import {CheckCircleOutlined, CloseCircleOutlined, SyncOutlined, ClockCircleOutlined} from "@ant-design/icons-vue";
    import upload from "@/components/upload";
    import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
    import {onMounted, ref} from "vue";
    import axios from "axios";
    import {Form, message} from "ant-design-vue";
    import dayjs from 'dayjs';
    import store from "@/store";

    export default {
        name: "conceptual",
        components: {
            CloseCircleOutlined,
            SyncOutlined,
            CheckCircleOutlined,
            ClockCircleOutlined,
            upload
        },
        setup() {
            const columns = [
                {
                    title: 'ID',
                    dataIndex: 'id',
                    key: 'id',
                },
                {
                    title: '标题',
                    dataIndex: 'title',
                    key: 'title',
                },
                {
                    title: '研发资金',
                    dataIndex: 'rdFunding',
                    key: 'rdFunding',
                },
                {
                    title: '申请人',
                    dataIndex: 'username',
                    key: 'username',
                },
                {
                    title: '审批进度',
                    dataIndex: 'taskName',
                    key: 'taskName',
                },
                {
                    title: '状态',
                    dataIndex: 'status',
                    key: 'status',
                },
                {
                    title: '操作',
                    key: 'action',
                }
            ]
            const commentColumns = [
                {
                    title: '时间',
                    dataIndex: 'time',
                    key: 'time',
                },
                {
                    title: '批注人',
                    dataIndex: 'userId',
                    key: 'user',
                },
                {
                    title: '批注信息',
                    dataIndex: 'fullMessage',
                    key: 'fullMessage',
                },
            ]

            const locale = zhCN
            const loginUser = ref({})
            const conceptual = ref({
                title: '',
                designConcept: ''
            })
            const conceptualList = ref()
            const pagination = ref({
                current: 1,
                pageSize: 5,
            })
            const pageSizeOptions = ref(['5', '10', '20', '30', '50', '100'])

            const conceptualVisible = ref(false)
            const conceptualDrawVisible = ref(false)
            const drawerData = ref({})
            const searchData = ref({
                buttonName: '我的方案'
            })

            const useForm = Form.useForm
            const {validate, validateInfos, resetFields, validateField, rulesRef} = useForm(conceptual, ref({
                title: [{required: true, message: '请输入标题', trigger: ['change']}],
                designConcept: [{required: true, message: '请说明设计方案', trigger: ['change']}],
            }))

            const switchPage = () => {
                if (searchData.value.buttonName == '我的方案') {
                    searchData.value.buttonName = '全部方案'
                    searchData.value.userId = loginUser.value.id
                } else {
                    searchData.value.buttonName = '我的方案'
                    searchData.value.userId = undefined
                }
                searchData.value.title = undefined
                load(1)
            }

            const load = (pageNum) => {
                pagination.value.current = pageNum == 1 ? 1 : pagination.value.current
                axios.get('/conceptual/queryByCondition', {
                    params: {
                        pageNum: pagination.value.current,
                        pageSize: pagination.value.pageSize,
                        title: searchData.value.title,
                        userId: searchData.value.userId
                    }
                }).then(rs => {
                    console.log("查找结果：", rs)
                    conceptualList.value = rs.data.records
                    pagination.value.total = rs.data.total
                })
            }

            const onChange = (pageNum, pageSize) => {
                pagination.value.current = pageNum
                pagination.value.pageSize = pageSize
                load()
            }

            const okDelete = (id) => {
                console.log("要删除的ID：" + id)
                axios.delete('/conceptual/deleteById/' + id).then(rs => {
                    if (rs.data.code == 200) {
                        message.success("删除成功")
                        load(1)
                    } else {
                        message.error(rs.data.message)
                    }
                })
            }

            const checkAuditTrail = (id) => {
                axios.get('process/auditTrail/developed/' + id).then(rs => {
                    drawerData.value = rs.data
                    console.log("查看审核详情：", drawerData.value)
                    conceptualVisible.value = true
                })
            }

            const openConceptualDraw = () => {
                // conceptual.value = {}
                resetFields()
                conceptualDrawVisible.value = true
            }

            const conceptualApply = () => {
                validate().then(() => {
                    console.log("通过校验")
                    conceptual.value.userId = loginUser.value.id
                    console.log("方案信息：", conceptual.value)

                    axios.post('conceptualProcess/startProcess', conceptual.value).then(rs => {
                        if (rs.code == 200) {
                            message.success("成功发起产品设计方案申请，请您耐心等待审批")
                            conceptualDrawVisible.value = false
                            load()
                        } else {
                            message.error(rs.message)
                        }
                    })
                }).catch(() => {
                    console.log("校验失败")
                })

            }

            const formatDate = (time) => {
                return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
            }

            onMounted(() => {
                loginUser.value = store.state.user
                load()
            })
            return {
                columns,
                commentColumns,
                pagination,
                onChange,
                load,
                okDelete,
                conceptual,
                conceptualList,
                checkAuditTrail,
                conceptualVisible,
                drawerData,
                locale,
                formatDate,
                pageSizeOptions,
                openConceptualDraw,
                conceptualDrawVisible,
                conceptualApply,
                loginUser,
                searchData,
                switchPage,
                validateInfos
            }
        }
    }
</script>

<style scoped>
    .cardContent {
        background: #fff;
        margin: 10px 10px 0 10px;
        padding: 15px;
    }
</style>